<template>
    <div>
        <div class="header block">
            <div class="row">
                <div class="search align-items">
                    <div>
                        <text>理赔状态：</text>
                        <el-select v-model="stateCode" class="screen-i search-type">
                            <el-option label="待处理" value="0" />
                            <el-option label="处理中" value="1" />
                            <el-option label="已结案" value="2" />
                            <el-option label="已驳回" value="3" />
                            <el-option label="已撤销" value="4" />
                            <el-option label="处理中" value="5" />
                            <el-option label="已结案" value="6" />
                        </el-select>
                    </div>
                    <div>
                        <input type="text" placeholder="请输入出险姓名或身份证" class="input search-input" v-model="searchText"
                            @keydown.enter="search" />
                        <button class="btn" @click="search">搜索</button>
                        <button class="btn-white" @click="onReset">重置</button>
                    </div>
                </div>
                <div>
                    <button class="btn" @click="$router.push({
                        path: '/insure-team-report-add'
                    })">新增理赔</button>
                </div>
            </div>
        </div>
        <div class="container block block-alone">
            <el-tabs model-value="detail">
                <div class="table">
                    <el-table :data="tableData" style="width: 100%" :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }" @selection-change="handleSelectionChange">
                        <!-- <el-table-column type="index" label="序号" /> -->
                        <el-table-column prop="outDangerUserName" label="出险人" />
                        <el-table-column label="身份证" prop="idCardNo">
                        </el-table-column>
                        <el-table-column prop="outDangerDate" label="出险时间" />
                        <el-table-column prop="outDangerPlace" label="出险地点" />
                        <el-table-column label="状态">
                            <!-- style="color:#1989FA" -->
                            <template #default="scope">
                                <p class="point">
                                    {{ scope.row.reportStatus === 1 || scope.row.reportStatus === 5 ? '处理中' :
                                        scope.row.reportStatus === 2 || scope.row.reportStatus === 6 ? '已结案' :
                                            scope.row.reportStatus === 3 ? '已驳回' : scope.row.reportStatus === 4 ? '已撤销' : '待处理'
                                    }}
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <p style="color:#1989FA" class="point" @click="
                                    $router.push({
                                        path: '/insure-team-report-detail/' + scope.row.id
                                    })
                                    ">
                                    查看详情
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination class="pagination" v-model:currentPage="pageNum" v-model:page-size="pageSize"
                        :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handleSizeChange" @current-change="getPayrollList">
                    </el-pagination>
                </div>
            </el-tabs>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { insureCaseList } from '@/api/insure-deduction'
import { BillDetailDto, BillDto } from '@/api/bill'
export default defineComponent({
    name: 'InsureTeamReport',
    components: {},
    data() {
        return {
            stateCode: '',
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as BillDetailDto[],
            searchText: '',
            searchValue: '',
            selects: [] as string[]
        }
    },
    created() {
        this.getPayrollList()
    },
    methods: {
        async getPayrollList() {
            const result = await insureCaseList({
                reportStatus: this.stateCode,
                searchText: this.searchValue,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                insureCompanyType: 'insure_type_tyrb'
            })
            this.total = result.total
            this.tableData = result.rows
        },
        handleSizeChange() {
            this.pageNum = 1
            this.getPayrollList()
        },
        search() {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getPayrollList()
        },
        onReset() {
            this.stateCode = ''
            this.searchText = ''
            this.search()
        },
        handleSelectionChange(selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px

.value.important
    color color-red
    font-style italic
:deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px
:deep().el-tabs__nav-scroll
    padding-right 20px
.height-right
    float: right
.download-btn
    width: 126px !important;
.btn-red
    background: #FF7E68
.el-tabs__header
    margin: 0
.block-alone
    padding: 0 24px 0
.screen-i
    margin-right 16px
</style>
